<template>
<div class="pay-info-1">
  <component :is="paymentCodeComponents"
    v-bind="$attrs"
    class="pay-code"
    :isAgree.sync="isAgreeProtocol"
    :logo="payLogo"
    :hasLogin="hasLogin"
    :product="product"
    @refresh="onCodeRefresh"
    @login="handleLogin"
    @onStatusChange="onStatusChange"/>
    <slot></slot>
  <div class="pay-type mt10 fs12">支持: <svg-icon iconClass="alipay" class="alipay"/>支付宝<template>/ <svg-icon iconClass="wechatpay" class="wechatpay"/>微信</template>
  </div>
  <div class="refund" v-if="appInfo.merchant==='lenovo'">
    <svg-icon iconClass="safe" class="safe-icon"/>
    <span class="fs12">支持7天无理由退款</span>
    <svg-icon iconClass="warning" class="warning-icon"/>
  </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import XzPaymentCode from './index.vue'
import LyPaymentCode from './ly-payment-code'
import SllPaymentCode from './sll-payment-code'
import { reportWithShorid } from '@/api/common'
import { isPassVersionByApp } from '@/utils/judge'
export default {
  name: 'PaymentCode',
  components: {
    XzPaymentCode,
    LyPaymentCode,
    SllPaymentCode
  },
  props: {
    pkgId: {
      require: true
    },
    isAgree: Boolean,
    product: Object,
    productPrice: Number,
    isExtraProducts: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'appInfo', 'appCfg', 'hasLogin']),
    paymentCodeComponents () {
      switch (this.appInfo.merchant) {
        case 'lenovo':
          return LyPaymentCode
        case '360':
          return SllPaymentCode
        default:
          return XzPaymentCode
      }
    },
    isAgreeProtocol: {
      get () {
        return this.isAgree
      },
      set (val) {
        this.$emit('update:isAgree', val)
      }
    },
    payLogo () {
      let logo = this.pkgIconObj[this.pkgId]
      if (logo === 'todo' && this.appInfo.app_name === 'XZDesktopCalendar') {
        logo = 'rili'
      }
      return logo
    }
  },
  created () {
    this.pkgIconObj = {
      '10000': 'desktop',
      '20000': 'todo',
      '40000': 'soso',
      '70000': 'xzpaper',
      '120000': 'everything'
    }
    this.$xzAsy('xz_get_day_from_installation').then(res => {
      this.payDay = res
    })
    this.$xzAsy('xz_get_paper_data').then(res => {
      if (res.paperID) {
        this.paperInfo = res
      }
    })
  },
  methods: {
    handleLogin () {
      this.$store.dispatch('user/login')
    },
    onCodeRefresh () {
      this.$emit('refresh')
    },
    async onStatusChange (status) {
      if (status !== 'succes') return
      if (this.isExtraProducts) {
        await this.reportSuccessExtra()
      } else {
        await this.reportSuccess()
      }
      this.$xz('xz_switch_dialog', 'XZDesktopOrderVIPSuccess', true, JSON.stringify({
        pkgid: this.pkgId,
        type: this.isExtraProducts ? 'extra' : ''
      }))
      if (this.isExtraProducts && isPassVersionByApp({
        '111': { v: '3.2.10.0' }
      })) {
        this.$xz('xz_update_power', true)
      } else {
        this.$xz('xz_update_pay_result', true)
      }

      this.$emit('paySuccess')
    },
    async reportSuccess () {
      const paperInfo = this.paperInfo || {}
      this.$xz('xz_substat_action', 2739)
      this.$xzReportInfo(2775, {
        scene: 226,
        duration: this.payDay || 0,
        param1: this.product.id,
        param2: parseInt(paperInfo.paperID || 0),
        param4: parseInt(paperInfo.categoryID || 0),
        param5: parseInt(paperInfo.isVideo || 0),
        param10: this.product.show_name,
        param12: paperInfo.category || ''
      })
      await this.$xzAsy('xz_get_stat_id').then(res => {
        if (/^8\d{3}$/.test(res) || !res) {
          const obj = {
            '10000': '9001',
            '20000': '9004',
            '40000': '9102',
            '70000': '9008'
          }
          const actionId = (res || 8002) + obj[this.pkgId]
          this.$xz('xz_substat_action', parseInt(actionId))
        } else {
          this.$xz('xz_substat_action', res)
        }
      })
      if (this.appInfo.semShortId) {
        await reportWithShorid({
          project: `${this.appCfg.name}_Ocpc`,
          shortId: this.appInfo.semShortId,
          newType: 26,
          convertValue: this.productPrice
        })
      }
    },
    async reportSuccessExtra () {
      await this.$xzAsy('xz_get_stat_id').then(res => {
        // this.$xz('xz_substat_action', parseInt((res || '') + '9009'))
        const id = parseInt((res || '') + '9009')
        if (id !== 9009) {
          this.$xz('xz_substat_action', 9009)
        }
        this.$xz('xz_substat_action', id)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.pay-type{
  margin-right: -5px;
}
.wechatpay,.alipay{
  font-size: 16px;
  margin-bottom: -1px;
  margin-right: 1px;
}
.refund{
  // display: flex;
  margin-top: 6px;
  margin-right: -10px;
  .safe-icon{
    margin-right: 2px;
    font-size: 16px;
  }
  .safe-icon{
    margin-right: 2px;
    font-size: 16px;
    vertical-align: -0.25em;
  }
  .warning-icon{
    margin-left: 3px;
    font-size: 14px;
    vertical-align: -0.2em;
  }
}
</style>
